import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:kxy_flutter_app/model/login_result.dart';
import 'package:kxy_flutter_app/r.dart';
import 'package:kxy_flutter_app/view/root/view_model/app_info_model.dart';
import 'package:provider/provider.dart';
import 'view_model/auth_model.dart';
import 'view_model/login_model.dart';

class LoginView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        // 触摸收起键盘
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: scrollBody(
          Column(
            children: [
              Expanded(
                child: Center(
                  child: body(context),
                ),
              ),
              phone(),
            ],
          ),
          context),
    );
  }

  Widget scrollBody(Widget child, BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(height: MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top, child: child),
        ),
      ),
    );
  }

  Widget phone() {
    return Container(
      margin: EdgeInsets.fromLTRB(40, 20, 40, 20),
      child: Text(
        '联系电话: 18535644725',
        style: TextStyle(
          fontSize: 12,
          color: Colors.black54,
        ),
      ),
    );
  }

  Widget body(BuildContext context) {
    var loginModel = Provider.of<LoginModel>(context);
    var authModel = Provider.of<AuthModel>(context);
    var appInfoModel = Provider.of<AppInfoModel>(context);
    return Container(
      margin: EdgeInsets.only(top: (MediaQuery.of(context).size.height - 500) / 2),
      child: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              color: Color.fromRGBO(240, 240, 240, 1),
              shape: BoxShape.circle,
              boxShadow: [
                BoxShadow(
                  color: Color.fromRGBO(0, 0, 0, 0.07),
                  blurRadius: 3,
                ),
              ],
            ),
            child: ClipOval(
              child: appInfoModel.logoUrl.isEmpty
                  ? Image.asset(R.assetsImgLogo, width: 90, height: 90)
                  : CachedNetworkImage(
                      height: 90,
                      width: 90,
                      imageUrl: appInfoModel.logoUrl,
                    ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 10),
            child: Text(
              appInfoModel.companyTitle,
              style: TextStyle(
                fontSize: 18,
                color: Colors.black87,
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(40, 50, 40, 0),
            child: createUserNameInput(loginModel),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(40, 20, 40, 0),
            child: createPasswordInput(loginModel),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(40, 40, 40, 0),
            child: createLoginButton(context, loginModel, authModel),
          ),
        ],
      ),
    );
  }

  Widget createUserNameInput(LoginModel loginModel) {
    return TextField(
      focusNode: loginModel.userNameFocusNode,
      controller: loginModel.userNameCtrl,
      textCapitalization: TextCapitalization.words,
      decoration: InputDecoration(
        hintText: '用户名',
        prefixIcon: Icon(
          Icons.person,
          size: 24,
        ),
      ),
    );
  }

  Widget createPasswordInput(LoginModel loginModel) {
    return TextField(
      focusNode: loginModel.passwordFocusNode,
      controller: loginModel.passwordCtrl,
      textCapitalization: TextCapitalization.words,
      obscureText: true,
      decoration: InputDecoration(
        hintText: '密码',
        prefixIcon: Icon(
          Icons.lock,
          size: 24,
        ),
      ),
    );
  }

  Widget createLoginButton(BuildContext context, LoginModel loginModel, AuthModel authModel) {
    return Container(
      width: double.infinity,
      height: 40,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(50),
        child: FlatButton(
          child: Text('登录', style: TextStyle(color: Colors.white)),
          color: Color.fromRGBO(5, 168, 244, 1),
          padding: EdgeInsets.symmetric(vertical: 0),
          onPressed: () async {
            var result = await loginModel.login();
            if (result.code == 200) {
              var loginResult = LoginResult.fromJson(result.data);
              authModel.authoize(loginResult);
            } else {
              showDialog(
                context: context,
                builder: (context) => createErrorDialog(context, result.msg),
              );
            }
          },
        ),
      ),
    );
  }

  Widget createErrorDialog(BuildContext context, String msg) {
    return AlertDialog(
      title: Text('登录失败'),
      content: Text(msg),
      actions: [
        FlatButton(
          child: Text('确认'),
          onPressed: () => Navigator.pop(context),
        ),
      ],
    );
  }
}
